import {Button, Image} from "antd";
import styles from './index.less';
import {ClockCircleFilled} from "@ant-design/icons";
import CommentSender from "./CommentSender";

export default ()=>{
  return (
    <>
      <div className={styles.commentItem}>
        <Image className={styles.avatar} preview={false} src='https://cn.cravatar.com/avatar/07137812e84758dac79e69309618715a?s=192&d=mm&r=g' />
        <section style={{
          borderBottom: '1px solid rgba(135,135,135,.15)',
          paddingBottom:16,
          marginBottom:16,
        }}>
          <div style={{
            marginBottom:4,
          }}>
            <div style={{
              marginBottom:4,
              fontSize:14,
            }}>太缘 <span title="头衔：游客" className={styles.rank}>游客</span></div>
          </div>
          <div>
            <p style={{
              color:'#1d232b',
              fontSize:14,
            }}>这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸这个栏目真的特别好~🌸</p>
          </div>
          <div style={{display: 'flex', justifyContent:'space-between', alignItems: 'center'}}>
            <div>
            <span style={{
              color:'#6c757d',
            }}><ClockCircleFilled style={{marginRight:4}} /><time dateTime="2023-09-06T09:18:59+08:00">2年前 (2023)</time></span>
            </div>
            <Button type='text'>回复</Button>
          </div>
        </section>
      </div>
      <CommentSender />
    </>
  )
}
